<template>
    <div id="systemSettings">
    <Header ></Header>
    <Nav></Nav>
    <span class="headertitle">消息管理</span>
     <el-card class="box-card">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="修改密码" name="first">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="原密码">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="form.name1"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码">
              <el-input v-model="form.name2"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.name3"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="form.name4"></el-input>
            </el-form-item>
            <el-button class="Change1" type="primary">确认修改</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业信息" name="second">
          <el-descriptions  :contentStyle="{'margin-left':'20px'}" :column="2">
              <el-descriptions-item label="单位名称">柳州云教研</el-descriptions-item>
              <el-descriptions-item label="上级机构">柳州教育科学院</el-descriptions-item>

          </el-descriptions>
          <el-descriptions  :contentStyle="{'margin-left':'20px'}" :column="2">
            <el-descriptions-item label="统一社会信用代码">123456789098765</el-descriptions-item>
              <el-descriptions-item  :contentStyle="{'margin-top':'-10px'}"  label="单位类型">
                <el-select  v-model="value" placeholder="其他教研机构">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-descriptions-item>
          </el-descriptions>
          <!-- 城市 编码 -->
          <el-descriptions :contentStyle="{'margin-left':'20px','margin-top':'10px'}" :column="2">
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="所属城市">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="邮政编码">
              <el-input v-model="form.name5"></el-input>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 单位地址 -->
          <el-descriptions  :contentStyle="{'margin-left':'20px'}" >
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="单位地址">
              <el-input class="address" v-model="form.name6"></el-input>
            </el-descriptions-item>
          </el-descriptions>
          <!-- 负责人 -->
          <el-descriptions class="fzr" :contentStyle="{'margin-left':'20px'}" title="科研管理负责人">
            </el-descriptions>
          <el-descriptions class="fzr1" :contentStyle="{'margin-left':'20px'}"  :column="2">
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="姓名">
              <el-form ref="form" :model="form" label-width="0px">
                <el-form-item>
                  <el-input class="username" v-model="form.xm"></el-input>
                </el-form-item>
              </el-form>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="手机号">
              <el-form ref="form" :model="form" label-width="0px">
                <el-form-item>
                  <el-input class="phone" v-model="form.phone"></el-input>
                </el-form-item>
              </el-form>
            </el-descriptions-item>
            <!-- 邮箱 固定电话 -->
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="邮箱">
              <el-form ref="form" :model="form" label-width="0px">
                <el-form-item>
                  <el-input class="username" v-model="form.emil"></el-input>
                </el-form-item>
              </el-form>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="固定电话">
              <el-form ref="form" :model="form" label-width="0px">
                <el-form-item>
                  <el-input class="Gphone" v-model="form.gphone"></el-input>
                </el-form-item>
              </el-form>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions  :contentStyle="{'margin-left':'20px'}" >
            <el-descriptions-item :contentStyle="{'margin-top':'-10px'}" label="单位地址">
              <el-input class="address" v-model="form.dwdz"></el-input>
            </el-descriptions-item>
          </el-descriptions>
          <el-button class="qr" type="primary">确认修改</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'
export default {
    data(){
        return {
          activeName: 'first',
          form:{
            name:'',
            name1:'',
            name2:'',
            name3:'',
            name4:'',
            // 
            name5:'',
            name6:'',
            name7:'',
            name8:'',
            dwdz:'',
            dwdz1:'',
            xm:"",
            xm1:'',
            emil:'',
            emil1:'',
            phone:'',
            phone1:'',
            gphone:'',
            gphone1:''

          },
          options: [{
          value: '选项1',
          label: '教研机构1'
        }, {
          value: '选项2',
          label: '教研机构2'
        }, {
          value: '选项3',
          label: '教研机构3'
        }, {
          value: '选项4',
          label: '其他教研机构'
        }],
        options1: [{
          value: '选项1',
          label: '柳州市'
        }, {
          value: '选项2',
          label: '其他城市'
        }],
        value: '',
        value1:'',
        rules:{
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ]
        }
        }
    },
    components:{
    Header,
    Nav
    },
    methods:{
      handleClick(tab, event) {
        // console.log(tab, event);
      }
    }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 91%;
  height: 820px;
  float: right;
  margin-right: 1%;
  margin-top: -44%;
  border-radius: 2%;
  font-weight: 700;
}
.Change1{
  margin: 20px 0  0 120px ;
}
.el-input{
  width: 35%;
}
.el-descriptions{
  margin-left: 4%;
  margin-top: 10px;
}
.el-option{
  margin-top: -30px;
}
.address{
  width: 69%;
}
.username{
  width: 215px;
}
.phone{
  width: 259px;
}
.fzr{
  margin-left: 3%;
}
.fzr1{
  margin-left: 5.5%;
}
.Gphone{
  width: 246px;
}
.qr{
  margin-left: 140px;
}
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 16px;
}
</style>